<template>
    <div id="app">
        <HeaderComponent />
        <div class="container">
            <CommonLinks />
            <div class="content">
                <MainContent />
                <RightSidebar />
            </div>
            <FooterComponent />
        </div>
    </div>
</template>

<script>
import HeaderComponent from "./components/HeaderComponent";
import MainContent from "./components/MainContent";
import RightSidebar from "./components/RightSidebar";
import FooterComponent from "./components/FooterComponent";
import CommonLinks from "./components/CommonLinks";
export default {
    name: "App",
    components: {
        HeaderComponent,
        MainContent,
        RightSidebar,
        FooterComponent,
        CommonLinks,
    },
};
</script>

<style>
:root {
    --primary-color: #0084ff;
    --page-main-width: 1200px;
    --card-space: 10px;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.02);
    --card-border-color: transparent;
    --divider: #f4f4f4;
    --button-hover-bg: hsla(0, 0%, 87%, 0.5);
    --button-active-bg: hsla(0, 0%, 96%, 0.7);
    --panel-border-color: transparent;
    background-size: auto;
    background-color: rgb(226, 227, 215);
    background-image: url(@/assets/images/006.jpg);
    background-repeat: no-repeat;
}

body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", 微软雅黑, Arial, sans-serif;
    font-size: 13px;
}

.container {
    margin: 0 auto;
    max-width: var(--page-main-width);
    box-sizing: border-box;
}

.content {
    display: flex;
    justify-content: space-between;
}
</style>
